import { FC } from 'react';
import { useTitle } from 'ahooks';
import styles from './index.module.scss';
import useLoadQuestionData from '../../../hooks/useLoadQuestionData';
import EditCanvas from './components/EditCanvas';
import LeftPanel from './components/LeftPanel';
import RightPanel from './components/RightPanel';
import { useDispatch } from 'react-redux';
import useGetPageInfo from '../../../hooks/useGetPageInfo';
import { changeSelectedId } from '../../../store/componentReducer';
import EditHeader from './components/EditHeader';
const Edit: FC = () => {
  const { loading } = useLoadQuestionData();
  const dispatch = useDispatch();
  const { title } = useGetPageInfo();
  useTitle(`编辑问卷 - ${title}`);
  //清除选中的selectedId
  function clearComponentSelected() {
    dispatch(changeSelectedId(''));
  }
  return (
    <div className={styles.container}>
      <EditHeader />
      <div className={styles['content-wrapper']}>
        <div className={styles.content}>
          <div className={styles.left}>
            <LeftPanel />
          </div>
          <div className={styles.main} onClick={clearComponentSelected}>
            <div className={styles['canvas-wrapper']}>
              <EditCanvas loading={loading} />
            </div>
          </div>
          <div className={styles.right}>
            <RightPanel />
          </div>
        </div>
      </div>
    </div>
  );
};
export default Edit;
